<template >
  <div v-show="notify">
    <div v-show="showModal" class="customize-modal" @mousedown.stop>
      <div class="el-dialog">
        <div class="el-dialog__header">
          <span class="el-dialog__title" v-text="modalType === 'clearMsg' ? $t('public.clearReadMsg') : $t('public.optTip')"></span>
          <i class="el-dialog__close el-icon el-icon-close close" @click="showModal = false"></i>
        </div>
        <div class="el-dialog__body">
          <div v-text="modalType === 'clearMsg' ? $t('public.clearReadMsgCont') : $t('public.optTipCont')"></div>
        </div>
        <div class="el-dialog__footer">
          <div class="dialog-footer">
            <el-button class="primary_btn" @click="showModal = false">{{$t('public.cancel')}}</el-button>
            <el-button type="primary" class="primary_btn" @click="confirm">{{$t('public.confirm')}}</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="notify-content">
      <div class="detail" @mousedown.stop v-show="isShowFoldList">
        <div style="overflow-y: auto;max-height: calc(100vh - 185px - 17px);padding: 10px 15px">
          <div class="title">
            <div class="sub-title">{{busFoldList.title}}</div>
          </div>
          <div class="creat-time">{{busFoldList.subTitle}}</div>
          <div class="line-hight-18">{{$t('business.businessFlow')}}：{{busFoldList.busType}}</div>
          <div class="line-hight-18 title-line">{{$t('business.businessNumber')}}： {{busFoldList.number}}</div>
          <div class="bus-fold-content">
            <div v-for="(item1, index) in busFoldList.list" style="padding: 10px 0px;border-bottom: 1px dashed #ccc">
              <div style="position: relative">
                <div v-html="item1.step1" class="step1-style"></div>
                <div style="position: absolute;right: 0px;top: 0px;color: rgb(135, 135, 135);">{{item1.createTime}}</div>
                <div style="margin-top: 10px" class="content3" v-show="item1.action === 'transformIn' || item1.action === 'backIn'" v-html="item1.step2"></div>
              </div>
              <div class="sub-content1">
                <div>{{$t('business.businessStep')}}： {{item1.step}}</div>
              </div>
              <div>
                <div>{{$t('notify.msgType')}}： {{item1.notifyType}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="opter-btn">
          <span @click.stop="handleKonw">{{$t('notify.iKnow')}}</span>
          <span @click.stop="handleJump(busFoldList.list[0])">{{$t('notify.showDetail')}}</span>
        </div>
      </div>
      <div class="detail" @mousedown.stop v-show="detailFlag">
        <div style="overflow-y: auto;max-height: calc(100vh - 185px - 17px);padding: 10px 15px">
          <div class="title">
            <div class="sub-title">{{detailObj.title}}</div>
            <div class="time">{{detailObj.time}}</div>
          </div>
          <div class="creat-time">{{detailObj.subTitle}}</div>
          <div class="content" v-show="detailObj.type === 'business'">
            <!--非服务工单-->
            <div>
              <div>
                <div v-html="detailObj.step1"></div>
                <div style="margin-top: 10px" class="content3" v-show="detailObj.action === 'transformIn' || detailObj.action === 'backIn'" v-html="detailObj.step2"></div>
              </div>
            </div>
            <div class="sub-content1">
              <div>{{$t('business.businessFlow')}}： {{detailObj.busType}}</div>
              <div>{{$t('business.businessStep')}}： {{detailObj.step}}</div>
              <div>{{$t('business.businessNumber')}}： {{detailObj.number}}</div>
            </div>
          </div>
          <div class="content" v-show="detailObj.type === 'configBusiness'">
            <!--服务工单-->
            <div class="sub-content1">
              <div>{{$t('business.businessNumber')}}： {{detailObj.number}}</div>
              <div>{{$t('business.businessConfigType')}}： {{detailObj.configType}}</div>
              <div class="summary" style="display: -webkit-box;-webkit-box-orient: vertical;">{{$t('business.businessConfigMessage')}}： {{detailObj.configMessage}}</div>
            </div>
          </div>
          <div class="content" v-if="detailObj.type === 'customer' && detailObj.content === 'customerAssign'">
            <div class="sub-content1">
              <div>{{$t('workbench.customerAssNum')}}： {{detailObj.num}}</div>
              <div class="summary" style="display: -webkit-box;-webkit-box-orient: vertical;">{{$t('workbench.customerAssName')}}： {{detailObj.customerName}}</div>
            </div>
          </div>
          <div class="content" v-if="detailObj.type === 'customer' && detailObj.notifyType === 'customerPlan'">
            <div class="sub-content1">
              <div>{{$t('customer.contactPlan.contactPlanTime')}}： {{detailObj.createTime}}</div>
              <div class="summary" style="display: -webkit-box;-webkit-box-orient: vertical;">{{$t('customer.contactPlan.contactPlanContent')}}：{{detailObj.content1}}</div>
              <div>{{$t('customer.contactPlan.excute')}}：{{detailObj.executorName}}</div>
              <div>{{detailObj.content2}}</div>
            </div>
          </div>
          <div class="content" v-if="detailObj.type === 'notice'">
            <div class="sub-content1">
              <div>{{detailObj.content}}</div>
            </div>
          </div>
          <div class="content" v-show="detailObj.type === 'email'">
            <div class="sub-content1">
              <div>{{$t('email.sender')}}： {{detailObj.data ? detailObj.data.from : ''}}</div>
              <div>{{$t('email.createTime')}}： {{detailObj.data ? detailObj.data.createTime : ''}}</div>
              <div>{{$t('email.emailSubject')}}： {{detailObj.data ? detailObj.data.subject : ''}}</div>
            </div>
          </div>
          <div class="content" v-if="detailObj.type === 'export'">
            <div class="sub-content1" v-if="detailObj.content !== 'call'">
              <div>{{$t('business.createTime')}}： {{detailObj.data && detailObj.data.createTime}}</div>
              <div>{{$t('business.exportSize')}}： {{detailObj.data && detailObj.data.fileSize}}</div>
              <div>{{$t('business.exportStatus')}}： {{detailObj.data && detailObj.data.status === 'success' ? $t('km.importSuccess') : $t('km.importError')}}</div>
              <div v-if="detailObj.data && detailObj.data.status === 'success'">{{$t('public.operate')}}： <a :href="detailObj.data && detailObj.data.path" download target="_blank">{{$t('public.download')}}</a></div>
            </div>
             <div class="sub-content1" v-else>
              <div>{{$t('business.createTime')}}： {{detailObj.data && detailObj.data.createTime}}</div>
              <div>{{$t('business.fileSource')}}：{{$t('routeI18n.callBlank')}}</div>
              <div>{{$t('business.exportSize')}}： {{detailObj.data && detailObj.data.fileSize}}</div>
              <div>{{$t('business.exportCount')}}： {{detailObj.data && detailObj.data.count}}</div>
              <div>{{$t('business.exportStatus')}}： {{detailObj.data && detailObj.data.status === 'success' ? $t('km.importSuccess') : $t('km.importError')}}</div>
              <div v-if="detailObj.data && detailObj.data.status === 'success'">{{$t('public.operate')}}： <a :href="detailObj.data && detailObj.data.path" download target="_blank">{{$t('public.download')}}</a></div>
             </div>
          </div>
          <div class="content" v-if="detailObj.type === 'call'">
            <div class="sub-content1">
              <div>{{detailObj.content2}}</div>
            </div>
          </div>
          <div class="content" v-if="detailObj.type === 'monitorWarning'">
            <div class="sub-content1">
              <div>{{detailObj.content2}}</div>
            </div>
          </div>
          <div v-show="detailObj.type === 'announcement'" class="content notify1" v-html="detailObj.content"></div>
          <div v-show="detailObj.type === 'monitor'" class="content notify1" v-html="detailObj.content">
          </div>
          <div v-if="detailObj.type === 'autoqc' && (detailObj.notifyType.indexOf('Call') > -1)" style="word-wrap: break-word;">
            <div>{{$t('notify.autoqcTime')}}{{detailObj.data?detailObj.data.gradeTime:'--'}}</div>
            <div class="font14" v-if="detailObj.notifyType!=='newFailedQcCall'" v-html="$t('notify.autoqcScore', {gradeAmount: detailObj.data.gradeAmount || '0'})"></div>
            <div class="font14" v-else v-html="detailObj.autoqcScore"></div>
            <div class="font14" v-if="detailObj.data && detailObj.data.rejectComment">{{$t('notify.autoqcRejectReason')}} {{detailObj.data?detailObj.data.rejectComment:'--'}}</div>
            <div class="qc-border font14">{{$t('notify.autoqcComment')}}{{detailObj.data.comment||$t('notify.autoqcNoContent')}}</div>
            <div class="qc-pad10">{{$t('notify.autoqcCallingNumber')}}{{detailObj.data && (detailObj.data.callType === 'normal' || detailObj.data.callType === 'transfer')?getHideNumber(detailObj.data.fromCid):detailObj.data.fromCid}}</div>
            <div>{{$t('notify.autoqcCalledNumber')}}{{detailObj.data && (detailObj.data.callType === 'normal' || detailObj.data.callType === 'transfer')?detailObj.data.fromDid:getHideNumber(detailObj.data.fromDid)}}</div>
            <div>{{$t('notify.autoqcCallType')}}{{detailObj.data?detailObj.data.callTypeName:'--'}}</div>
            <div>{{$t('notify.autoqcCallTime')}}{{detailObj.data?detailObj.data.offringTime:'--'}}</div>
          </div>
          <div v-if="detailObj.type === 'autoqc' && (detailObj.notifyType.indexOf('Chat') > -1)" style="word-wrap: break-word;">
            <div>{{$t('notify.autoqcTime')}} {{detailObj.data?detailObj.data.gradeTime:'--'}}</div>
            <div class="font14" v-if="detailObj.notifyType!=='newFailedQcChat'" v-html="$t('notify.autoqcScore', {gradeAmount: detailObj.data.gradeAmount || '0'})"></div>
            <div class="font14" v-else v-html="detailObj.autoqcScore"></div>
            <div class="font14" v-if="detailObj.data && detailObj.data.rejectComment">{{$t('notify.autoqcRejectReason')}} {{detailObj.data?detailObj.data.rejectComment:'--'}}</div>
            <div class="qc-border font14">{{$t('notify.autoqcComment')}} {{detailObj.data.comment || $t('notify.autoqcNoContent')}}</div>
            <div class="qc-pad10">{{$t('notify.autoqcCustomerSource')}}{{detailObj.sourceName}}</div>
            <div>{{$t('notify.autoqcPlatform')}}{{detailObj.data.platform === 'pc'?$t('webchat.websiteCon'):detailObj.data.platform === 'wap'?$t('webchat.wapCon'):detailObj.data.platform === 'sdk'?$t('webchat.appCon'):detailObj.data.platform === 'weixin'?$t('webchat.weChatCon'):detailObj.data.platform === 'wxmini'?$t('webchat.weChatMini'):detailObj.data.platform === 'wxwork'?$t('webchat.enterpriseShot'):detailObj.data.platform === 'weibo'?$t('webchat.weBoCon'):detailObj.data.platform === 'ocpc'?$t('webchat.baiduBCP'):detailObj.data.platform === 'dy'?$t('webchat.TikTok'):detailObj.data.platform === 'wxkf'?$t('webchat.platformWXKF'): '未知来源'}}</div>
            <div>{{$t('notify.autoqcSessionType')}}{{detailObj.data.finishName||'--'}}</div>
            <div>{{$t('notify.autoqcSessionTime')}}{{detailObj.data?detailObj.data.beginTime:'--'}}</div>
          </div>
          <div v-if="detailObj.type === 'trigger'" class="content">
            <div class="trigger-content">
              {{detailObj.triggerContent}}
            </div>
            <div class="sub-content1" v-if="detailObj.data.type === 'business'">
              <div>{{$t('business.businessFlow')}}： {{detailObj.busType}}</div>
              <div>{{$t('business.businessStep')}}： {{detailObj.stepName}}</div>
              <div>{{$t('business.businessNumber')}}： {{detailObj.data.businessNum}}</div>
            </div>
            <div v-else-if="detailObj.data.type === 'mail'">
              <div>{{$t('business.businessNumber')}}： {{detailObj.data.businessNum}}</div>
              <div v-if="detailObj.data.customerName.length">{{$t('public.customerName')}}： {{detailObj.data.customerName.join(', ')}}</div>
              <div v-if="detailObj.data.agentName.length">{{$t('public.agent')}}： {{detailObj.data.agentName.join(', ')}}</div>
              <div>{{$t('business.errorReason')}}： {{detailObj.data.errReason}}</div>
            </div>
            <div class="sub-content1" v-else>
              <div>{{$t('business.businessNumber')}}： {{detailObj.data.businessNum}}</div>
              <div>{{$t('public.mobile')}}： {{detailObj.data.phone}}</div>
              <div>{{$t('public.' + (detailObj.data.type === 'customer'? 'customerName': 'agent'))}}： {{detailObj.data.name}}</div>
              <div>{{$t('business.errorReason')}}： {{detailObj.data.errReason}}</div>
            </div>
          </div>

        </div>
        <div class="opter-btn">
          <span @click.stop="handleKonw">{{$t('notify.iKnow')}}</span>
          <span @click.stop="handleJump(detailObj)" v-show="detailObj.type === 'notice'  || detailObj.type === 'customer'  || detailObj.type === 'export' || detailObj.type === 'configBusiness' || detailObj.type === 'business' || detailObj.type === 'email' || detailObj.type === 'trigger'|| (detailObj.type === 'autoqc' && detailObj.notifyType!=='newFailedQcCall' && detailObj.notifyType!=='newFailedQcChat')">{{$t('notify.showDetail')}}</span>
        </div>
      </div>
      <div class="notify" @mousedown.stop>
        <div class="notify-title">
          <div style="padding: 15px 10px">
            <i  class="iconfont icon-xiaoxitongzhi"></i>
            <span class="padd-l-10" @click.stop="showTypeMenu" style="cursor: pointer">{{filterTypeName}}</span>
            <i  class="iconfont icon-zhankai1" @click.stop="showTypeMenu"></i>
            <i  class="iconfont icon-gengduo" @click.stop="showOption"></i>
          </div>
          <div v-show="showMenu1" class="type-menu">
            <ul>
              <li @click.stop="changeMenu('all')">
                <span class="padd-l-5">{{$t('workbench.all')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'all'"></i>
              </li>
              <li @click.stop="changeMenu('noRead')">
                <i  class="noread-circle" v-show="undealNum !== 0"></i>
                <span class="padd-l-5">{{$t('workbench.noRead')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 12px" v-show="checkType === 'noRead'"></i>
              </li>
              <li @click.stop="changeMenu('notice')">
                <span class="padd-l-5">{{$t('workbench.noticeNotify')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'noticeNotify'"></i>
              </li>
              <li @click.stop="changeMenu('business')" v-show="!flag">
                <span class="padd-l-5">{{$t('workbench.business')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'business'"></i>
              </li>
              <li @click.stop="changeMenu('announcement')">
                <span class="padd-l-5">{{$t('workbench.announcement')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'announcement'"></i>
              </li>
              <li @click.stop="changeMenu('autoqc')" v-show="!flag">
                <span class="padd-l-5">{{$t('workbench.autoqc')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'autoqc'"></i>
              </li>
              <li @click.stop="changeMenu('configBusiness')" v-show="!flag">
                <span class="padd-l-5">{{$t('workbench.configBusiness')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'configBusiness'"></i>
              </li>
              <li @click.stop="changeMenu('email')" v-show="!flag">
                <span class="padd-l-5">{{$t('workbench.email')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'email'"></i>
              </li>
              <li @click.stop="changeMenu('export')">
                <span class="padd-l-5">{{$t('workbench.export')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'export'"></i>
              </li>
              <li @click.stop="changeMenu('trigger')" v-show="!flag">
                <span class="padd-l-5">{{$t('workbench.trigger')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'trigger'"></i>
              </li>
              <li @click.stop="changeMenu('customer')">
                <span class="padd-l-5">{{$t('workbench.customer')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'customer'"></i>
              </li>
              <li @click.stop="changeMenu('call')">
                <span class="padd-l-5">{{$t('workbench.call')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'call'"></i>
              </li>
              <li @click.stop="changeMenu('monitorWarning')">
                <span class="padd-l-5">{{$t('workbench.monitorWarning')}}</span>
                <i class="iconfont icon-xuanze" style="padding-left: 35px" v-show="checkType === 'monitorWarning'"></i>
              </li>
            </ul>
          </div>
          <div v-show="showMenu2" class="operating">
            <ul>
              <li @click.stop="changeOpt('readMsg')">
                <i class="iconfont icon-xuanze padd-l-10"></i>
                <span class="padd-l-5">{{$t('workbench.readMsg')}}</span>
              </li>
              <li @click.stop="changeOpt('clearMsg')" v-show="checkType !== 'noRead'">
                <i class="iconfont icon-shanchu padd-l-10"></i>
                <span class="padd-l-5">{{$t('workbench.clearMsg')}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="content" id="content-auto" v-on:scroll="getNoticeHistoryScroll($event)">
          <div v-show="noticeList.length === 0 && noneFlag" class="no-notice">{{$t('public.noNotify')}}</div>
          <ul v-show="noticeList.length !== 0">
            <li class="clear-fl" @click.stop="showDetail(item,index)" v-for="(item, index) in noticeList" :key="item._id" :class="{active:index==isActive}">
              <!--新增加一个客户图标icon-customer-->
              <div class="icon float-l">
                <i :class="['iconfont',
                item.type === 'notice'? 'icon-xitongtongzhi': item.type === 'autoqc'? 'icon-zhinengzhijiantongzhi': item.type === 'email' ? 'icon-youjian' : item.type === 'customer' ? 'icon-suozaijinengzupaiduizongshu' : item.type === 'announcement'?'icon-xitongtongzhi' : 'icon-gongdan']"></i>
              </div>
              <div class="dynamic">
                <div class="height-20">
                  <div class="title ellipsis">{{item.title1}}</div>
                  <div class="time">
                    <span class="time1">{{item.createTime1}}</span>
                    <span class="opt-btn">
                    <i class="iconfont icon-guanbi" @click.stop="deleteList(item)"></i>
                  </span>
                  </div>
                </div>
                <div class="read-cont ellipsis" :class="[item.isRead === true?'read-cont1' : '']">{{item.content1}}</div>
                <div class="bus-name" v-if="item.type === 'business' || item.type === 'trigger'" v-text="item.name ? item.name : '该工单定位的客户已删除'"></div>
                <span class="unReadNum" v-if="item.unReadNum > 0 || (!item.listCount && (item.isRead === false))" v-text="item.unReadNum ? item.unReadNum : '1'"></span>
              </div>
            </li>
          </ul>
        </div>
        <div v-show="loading" class="loading-footer">
          <div class="loader">
            <div class="loading-1">
              <i></i>
              <i></i>
              <i></i>
            </div>
          </div>
        </div>
      </div>
      <div class="tooltip tooltip-i1"></div>
    </div>
  </div>
</template>
<script>
  import {getBusinessHisotryInfo} from '@/utils/workflowUtils.js'
  import * as types from '@/store/modules/cti/mutation-types.js'
  import * as typesGl from '@/store/mutation-types.js'
  import { msgConvertion } from '@/utils/webchat.js'
  import bus from '@/store/eventBus'
  import { formatShortTime, deepClone, isHasMenu, checkHideTel } from '@/utils/m7Utils.js'
  export default {
    name: 'notifyContent',
    data () {
      return {
        phoneBarsList: [],
        flag: this.$store.getters.isEcommerce ? true : false, // 是否是电商平台
        jumpObj: {},
        agentsFlag: false,
        modalType: '',
        isActive: -1,
        showModal: false,
        noticeList: [],
        detailObj: {},
        detailFlag: false,
        loading: false,
        currentPage: 1,
        checkType: 'all',
        filterTypeName: this.$t('workbench.all'),
        showMenu1: false,
        showMenu2: false,
        notify: false,
        speedTip: '已断网',
        versionFlag: false,
        logoutVisible: false,
        checked: true,
        spend: 'brokenNetwork',
        imgPath: 'error',
        _heig: 0,
        version: '',
        pageSize: 20,
        noneFlag: false,
        moreFlag: false,
        closeMobile: false, // 是否关闭
        closeMobileStatus: false,
        cardList: [],
        refreshPage: false,
        isShowFoldList: false, // 是否展示工单模块折叠的详情
        isShowQuickReply: false, // 是否显示快捷回复设置
        titleArr: ['返回'],
        busFoldList: {
          title: '',
          subTitle: '',
          creatime: '',
          busType: '',
          number: '',
          data: {
            number: ''
          },
          list: []
        } // 工单模块折叠的通知详情
      }
    },
    methods: {
      // 格式化通知列表的时间
      chatTime (item) {
        let shortTime = formatShortTime(item.createTime)
        return shortTime.name
      },
      //      处理我知道了
      handleKonw () {
        this.detailFlag = false
        this.isShowFoldList = false
        this.isActive = -1
      },
      //      重置各种状态
      getHideNumber (num) {
        return checkHideTel(num, this.$store.state.session.user)
      },
      //      页面详情路由跳转数据重置
      routerJump (_obj) {
        console.log(_obj)
        this.detailFlag = false
        this.isShowFoldList = false
        this.showModal = false
        this.notify = false
        this.showMenu1 = false
        this.showMenu2 = false
//        let str = _obj.data.businessId + '/' + _obj.data.customerId
        if (_obj.type === 'customer' && _obj.content === 'customerAssign') {
          let _obj1 = {
            module: 'customer',
            random: Math.random()
          }
          this.$router.push({path: '/index/customer', query: {active: 'customer_my'}})
          this.$store.commit(typesGl.NOTICECUSTOMER, _obj1)
        } else if (_obj.type === 'customer' && _obj.notifyType === 'customerPlan') {
          let _obj1 = {
            module: 'customer',
            random: Math.random()
          }
          this.$router.push({path: '/index/customer', query: {active: 'customer_plan', id: _obj.data.customerId, selectVal: _obj.data.type === 'owner' ? '' : 'executor'}})
          this.$store.commit(typesGl.NOTICECUSTOMER, _obj1)
        } else if (_obj.type === 'notice') {
          let _obj1 = {
            module: 'workbenchesNot',
            random: Math.random()
          }
          this.$router.push({path: '/index/workbench', query: {module: 'workbenches', flag: 'notice'}})
          this.$store.commit(typesGl.NOTICENEW, _obj1)
        } else {
          let _obj1 = {
            module: 'business',
            random: Math.random()
          }
          if (_obj.type === 'configBusiness' && _obj.content === 'reply') {
            // 回复给客户的工单跳到服务工单列表
            _obj1.module = 'configBusiness'
            this.$router.push({path: '/index/ServiceBusinessList', query: {busNumber: _obj.data.number}})
          } else if (_obj.content === 'addBusDynamic' || _obj.content === 'busDynamic') {
            // 关注的工单通知
            this.$router.push({path: '/index/business/', query: {active: 'business_all', flag: 'advSearch', type: 'attention', busNumber: _obj.data.number}})
          } else if (_obj.content === 'businessJoin') {
            // 参与处理的工单通知
            this.$router.push({path: '/index/business/', query: {active: 'business_all', flag: 'advSearch', type: 'businessJoin', busNumber: _obj.data.number}})
          }else if (_obj.type === 'trigger') {
            // 触发器工单通知
            this.$router.push({path: '/index/business/', query: {active: 'business_all', flag: 'advSearch', busNumber: _obj.data.businessNum}})
          } else {
            this.$router.push({path: '/index/business/', query: {active: 'business_all', flag: 'advSearch', busNumber: _obj.data.number}})
          }
          this.$store.commit(typesGl.NOTICEBUSSINESS, _obj1)
        }
      },
      // 处理列表的title
      handleNotListTitle (obj) {
        if (obj.type === 'announcement') {
          obj.title1 = this.$t('notify.sysNotice')
        } else if (obj.type === 'autoqc') {
          if (obj.notifyType === 'newQcCall' || obj.notifyType === 'recheckCall' || obj.notifyType === 'newFailedQcCall') {
            obj.title1 = obj.grade === 'qcExcellent' ? this.getHideNumber(obj.title) + this.$t('notify.autoqcCallExcellent') : obj.grade === 'qcPass' ? this.getHideNumber(obj.title) + this.$t('notify.autoqcCallPass') : obj.grade === 'qcFail' ? this.getHideNumber(obj.title) + this.$t('notify.autoqcCallFail') : this.getHideNumber(obj.title)
          } else if (obj.notifyType === 'rejectAppealCall') {
            obj.title1 = this.getHideNumber(obj.title) + this.$t('notify.autoqcCallReject')
          } else if (obj.notifyType === 'newQcChat' || obj.notifyType === 'recheckChat' || obj.notifyType === 'newFailedQcChat') {
            obj.title1 = obj.grade === 'qcExcellent' ? obj.title + this.$t('notify.autoqcChatExcellent') : obj.grade === 'qcPass' ? obj.title + this.$t('notify.autoqcChatPass') : obj.grade === 'qcFail' ? obj.title + this.$t('notify.autoqcChatFail') : obj.title
            if (obj.data && obj.data.customerName) {
              obj.title1 = this.$t('notify.autoqcCustomer') + obj.title1
            } else {
              obj.title1 = this.$t('notify.autoqcVisitor') + obj.title1
            }
          } else if (obj.notifyType === 'rejectAppealChat') {
            obj.title1 = obj.title + this.$t('notify.autoqcChatReject')
            if (obj.data && obj.data.customerName) {
              obj.title1 = this.$t('notify.autoqcCustomer') + obj.title1
            } else {
              obj.title1 = this.$t('notify.autoqcVisitor') + obj.title1
            }
          }
        } else if (obj.type === 'customer' && obj.content === 'customerAssign') {
          obj.title1 = this.$t('notify.saleAssign')
          obj.title = this.$t('notify.saleAssign')
        } else if (obj.type === 'customer' && obj.notifyType === 'customerPlan') {
          // 联系计划
          obj.title1 = obj.data.customerName
          obj.title = obj.data.customerName
        } else {
          obj.title1 = obj.title
        }
      },
      // 处理列表的工单的content
      handleNotListBusContent (obj) {
        // 通过list去判定是否是新工单
        if (obj.list || obj.listCount) {
          if (obj.list.length !== 0) {
            if (obj.listCount > 1) {
              obj.content1 = this.$t('notify.foldCotent')
            } else {
              if (obj.list[0].content === 'busDynamic') {
                obj.content1 = this.$t('notify.busDynamic')
              } else if (obj.list[0].content === 'addBusDynamic') {
                let _agent = this.agents[obj.senderId]
                if (_agent) {
                  obj.content1 = this.$t('notify.addBusDynamic', {agentId: _agent !== 'system' ? _agent.displayName : ''})
                }
              } else if (obj.list[0].content === 'removeBusDynamic') {
                let _agent = this.agents[obj.senderId]
                if (_agent) {
                  obj.content1 = this.$t('notify.removeBusDynamic', {agentId: _agent !== 'system' ? _agent.displayName : ''})
                }
              } else if (obj.list[0].content === 'businessClaim') {
                obj.content1 = this.$t('notify.busClaim')
              } else if (obj.list[0].content === 'businessJoin') {
                obj.content1 = this.$t('notify.businessJoin')
              } else if (obj.list[0].content === 'businessAssign' || obj.list[0].content === 'businessAssignToMe') {
                obj.content1 = this.$t('notify.businessAssign')
              } else if (obj.list[0].content === 'undealbusTimeout') {
                obj.content1 = this.$t('notify.undealbusTimeout')
              } else if (obj.list[0].content === 'mybusTimeout') {
                obj.content1 = this.$t('notify.mybusTimeout')
              } else if (obj.list[0].content === 'masterLeader') {
                obj.content1 = this.$t('notify.leaderBusTimeout')
              } else if (obj.list[0].content === 'businessUrgeTime') {
                obj.content1 = this.$t('notify.cuibanBusiness')
              }
            }
          }
        }
      },
      // 处理列表的智能质检的content
      handleNotListAutoqcContent (obj) {
        if (obj.notifyType === 'newQcCall' || obj.notifyType === 'recheckCall' || obj.notifyType === 'newFailedQcCall') {
          obj.content1 = obj.grade === 'qcExcellent' ? this.$t('notify.autoqcCallContentExcellent') : obj.grade === 'qcPass' ? this.$t('notify.autoqcCallContentPass') : obj.grade === 'qcFail' ? this.$t('notify.autoqcCallContentFail') : obj.content
        } else if (obj.notifyType === 'rejectAppealCall') {
          obj.content1 = this.$t('notify.autoqcCallContentReject')
        } else if (obj.notifyType === 'newQcChat' || obj.notifyType === 'recheckChat' || obj.notifyType === 'newFailedQcChat') {
          obj.content1 = obj.grade === 'qcExcellent' ? this.$t('notify.autoqcChatContentExcellent') : obj.grade === 'qcPass' ? this.$t('notify.autoqcChatContentPass') : obj.grade === 'qcFail' ? this.$t('notify.autoqcChatContentFail') : obj.content
        } else if (obj.notifyType === 'rejectAppealChat') {
          obj.content1 = this.$t('notify.autoqcChatContentReject')
        }
      },
      //      处理列表消息的li
      handleNotList (obj) {
        this.handleNotListTitle(obj)
        if (obj.type === 'business') {
          this.handleNotListBusContent(obj)
        } else if (obj.type === 'announcement') {
          obj.content1 = obj.title
        } else if (obj.type === 'autoqc') {
          this.handleNotListAutoqcContent(obj)
        } else if (obj.type === 'monitor' && obj.content === 'remoteAssistUpperLimitWarn') {
          obj.content1 = '远程控制连接数即将达到上限'
        } else if (obj.type === 'monitor' && obj.content === 'remoteAssistUpperLimit') {
          obj.content1 = '远程控制连接数已达到上限'
        } else if (obj.type === 'configBusiness') {
          // 服务工单
          let configType = obj.data.configType
          let head = obj.content === 'receive' ? this.$t('public.customer') : this.$t('business.your')
          obj.content1 = this.$t('business.serviceNofify', {people: head, type: configType})
        } else if (obj.type === 'export') {
          let nameObj = {
            business: this.$t('public.business'),
            webchat: this.$t('webchat.chatContent'),
            call: this.$t('intelligentQualityCheck.intelCallRecord'),
            km: this.$t('public.km')
          }
          obj.title1 = nameObj[obj.content] + (obj.data.status === 'success' ? this.$t('webchat.exportSuccess') : this.$t('webchat.exportError'))
          obj.content1 = obj.data.status === 'success' ? this.$t('notify.realExportSuc') : this.$t('notify.realExportFail')
        } else if (obj.type === 'customer' && obj.content === 'customerAssign') {
          obj.content1 = this.$t('workbench.custmoerAss')
        } else if (obj.type === 'customer' && obj.notifyType === 'customerPlan') {
          // 联系计划
          obj.content1 = this.$t('notify.customerContactPlan1')
        } else if (obj.type === 'tirgger'||obj.type === 'trigger') {
          obj.content1 = this.$t('notify.businessAssign')
        } else if (obj.type === 'monitorWarning') {
          let type = obj.notifyType
          let text = ''
          if (type === 'agentBusyStatus') {
            let state = obj.details.status
            this.phoneBarsList.some((item)=>{
              if (item.PhoneBarItemId === state) {
                text =item.PhoneBarItemName + '状态已超时'
                return true;
              }
            })
          } else {
            text = '通话状态已超时'
          }
          obj.title1 = this.$t('workbench.monitorWarning')
          let exten = this.agents[obj.agentId].exten
          let displayName = this.agents[obj.agentId].displayName
          obj.content1 = displayName + '('+ exten + ')'+ text
        } else if (obj.type === 'call') {
          obj.title1 = this.$t('workbench.call')
          obj.content1 = obj.name
        } else {
          obj.content1 = obj.content
        }
        obj.createTime1 = this.chatTime(obj)
        return obj
      },
      showBusDetail (_item, itemData, index) {
        this.noticeList.list = [] // 存放通知的详情
        // listCount去判定新工单通知的条数是否大于1条， 如果大于一条 不调用readNotify接口, 直接在详情接口中去处理
        if (_item.listCount > 1) {
          this.$store.dispatch('getBusNoyifyList', {_id: _item._id}).then((res) => {
            if (res && res.success) {
              this.noticeList[index].unReadNum = 0
              this.noticeList[index].isRead = true
              if (this.$store.state.cti.globalLet.undealNum > 0) {
                this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: this.$store.state.cti.globalLet.undealNum - res.successNum})
              } else {
                this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: 0})
              }
              this.handleShowDetailList(res.list, _item.createTime)
            }
          })
        } else {
          // unReadNum是未读数， 如果未读数小于1，说明该条已读
          if (itemData.unReadNum < 1) {
            this.handleShowDetail(_item.list[0], index, true)
          } else {
            // 如果未读数大于1，调用未读接口， 并且把未读数减1
            let _data = {
              _id: _item._id,
              type: 'business'
            }
            this.$store.dispatch('readNotify', _data).then((res) => {
              if (res && res.success) {
                this.noticeList[index].isRead = true
                this.noticeList[index].unReadNum = 0
                if (this.$store.state.cti.globalLet.undealNum > 0) {
                  this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: this.$store.state.cti.globalLet.undealNum - 1})
                } else {
                  this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: 0})
                }
                this.handleShowDetail(_item.list[0], index, true)
              }
            })
          }
        }
      },
      //      查看详情
      showDetail (itemData, index) {
        console.log(itemData,'itemData')
        let _item = deepClone(itemData)
        this.isActive = index
        this.showMenu1 = false
        this.showMenu2 = false
        if (_item.type === 'business') {
          this.showBusDetail(_item, itemData, index)
        } else {
          if (itemData.isRead) {
            this.handleShowDetail(_item, index)
          } else {
            let _data = {
              _id: _item._id
            }
            this.$store.dispatch('readNotify', _data).then((res) => {
              if (res && res.success) {
                this.handleShowDetail(_item, index)
              }
            })
          }
        }
      },
      handleShowDetailList (_list, crateTim) {
        this.detailFlag = false // 是否展示旧工单详情
        this.isShowFoldList = true // 是否展示信工单详情
        // 工单详情的编号 工单名称
        if (_list.length !== 0) {
          this.busFoldList.title = _list[0].title
          this.busFoldList.number = _list[0].data ? _list[0].data.number : ''
          this.busFoldList.data.number = _list[0].data ? _list[0].data.number : ''
        }
        // 处理工单详情
        let _array = []
        for (let i = 0; i < _list.length; i++) {
          let _item = _list[i]
          let _notifyType = ''
          console.log(_list[i].notifyType, '_list[i].notifyType')
          if (_list[i].notifyType === 'businessAssign' || _list[i].notifyType === 'businessAssignToMe') {
            _notifyType = this.$t('notify.businessAssign1')
          } else if (_list[i].notifyType === 'businessClaim') {
            _notifyType = this.$t('notify.businessClaim1')
          } else if (_list[i].notifyType === 'businessAttention') {
            _notifyType = this.$t('notify.businessAttention1')
          } else if (_list[i].notifyType === 'businessJoin') {
            _notifyType = this.$t('notify.businessJoin1')
          } else if (_list[i].notifyType === 'businessTimeout') {
            _notifyType = this.$t('notify.businessTimeout1')
          } else if (_list[i].notifyType === 'businessUrgeTime') {
            _notifyType = '催办工单'
          } else {
            _notifyType = this.$t('notify.otherBus1')
          }
          let _obj = {
            data: _list[i].data,
            type: _list[i].type,
            action: _item.data.action,
            content: _list[i].content,
            time: _list[i].createTime1,
            createUser: '',
            createTime: this.chatTime(_list[i]),
            info: {},
            notifyType: _notifyType
          }
          _obj.action = _item.data.action
          let _createUser = this.agents[_item.data.createUser].displayName
          _obj.createUser = _createUser
          let info = getBusinessHisotryInfo(_item.data, _item.data.step, _item.data.fromStep, _item.data.excuteAction)
          _obj.info = info
          this.busFoldList.subTitle = this.$t('notify.creatBusTime', {createUser: _createUser, createTime1: crateTim})
          let _busType = this.busType.filter((item1) => {
            return item1._id === _item.data.flow
          })
          _obj.step = info.stepName
          this.busFoldList.busType = _busType[0].name
          if (_obj.action === 'transformIn') {
            _obj.step1 = this.$t('notify.step1', {master: this.agents[_item.data.master].displayName, actionName: info.actionName})
            _obj.step2 = this.$t('notify.step2', {fromStepName: _obj.info.fromStepName, stepName: _obj.info.stepName})
          } else if (_obj.action === 'comment') {
            _obj.step1 = this.$t('notify.stepComment', {master: this.agents[_item.data.master].displayName, content: _item.data.excuteData.backInfo})
          } else if (_obj.action === 'assign') {
            console.log(_obj)
            if (_obj.content === 'undealbusTimeout' || _obj.content === 'mybusTimeout'|| _obj.content === 'timeoutCurrent') {
              _obj.step1 = this.$t('notify.busTimeout')
            } else if (_obj.content === 'masterLeader') {
              _obj.step1 = this.$t('notify.leaderBusTimeout')
            }else if (_obj.content === 'timeoutBefore'||_obj.content === 'timeoutAfter') {
              _obj.step1 = this.$t('notify.businessAssign')
            }else {
              if (_item.data.excuteData.master) {
                _obj.step1 = this.$t('notify.stepAssign', {master: this.agents[_item.data.master].displayName, excuteUser: this.agents[_item.data.excuteData.master].displayName})
              } else {
                _obj.step1 = this.$t('notify.stepAssign', {master: this.agents[_item.data.master].displayName, excuteUser: this.$t('public.autoAssign')})
              }
            }
          } else if (_obj.action.indexOf('trigger') !== -1) {
            if (_obj.content === 'undealbusTimeout' || _obj.content === 'mybusTimeout'|| _obj.content === 'timeoutCurrent') {
              _obj.step1 = this.$t('notify.busTimeout')
            } else if (_obj.content === 'masterLeader') {
              _obj.step1 = this.$t('notify.leaderBusTimeout')
            }
          } else if (_obj.action === 'share') {
            if (_obj.content === 'removeBusDynamic') {
              _obj.step1 = this.$t('notify.shareRemoveBusDynamic', {senderId: _item.senderId !== 'system' ? this.agents[_item.senderId].displayName : ''})
            } else {
              console.log(_obj)
              console.log(this.agents[_item.senderId])
              _obj.step1 = this.$t('notify.shareBusDynamic', {senderId: _item.senderId !== 'system' ? this.agents[_item.senderId].displayName : ''})
            }
          } else if (_obj.action === 'backIn') {
            _obj.step1 = this.$t('notify.step1', {master: this.agents[_item.data.excuteUser].displayName, actionName: info.actionName})
            _obj.step2 = this.$t('notify.step2', {fromStepName: _obj.info.fromStepName, stepName: _obj.info.stepName})
          } else if (_obj.action === 'recreate') {
            _obj.step1 = this.$t('notify.step1', {master: this.agents[_item.data.master].displayName, actionName: info.actionName})
          } else if (_obj.action === "urge") {
            _obj.step1 = this.$t('notify.cuibanBusiness')
          }
          _array.push(_obj)
        }
        console.log(this.busFoldList)
        this.busFoldList.list = _array
      },
      handleShowAutoqcDetail (_item, _obj) {
        let autoqcData = _item.data
        if (autoqcData) {
          autoqcData.callTypeName = autoqcData.callType === 'normal' ? this.$t('qualityCheck.normalCallIn') : autoqcData.callType === 'transfer' ? this.$t('qualityCheck.callInTrans') : autoqcData.callType === 'dialout' ? this.$t('qualityCheck.callOut') : autoqcData.callType === 'dialTransfer' ? this.$t('qualityCheck.callOutTrans') : ''
        }
        if (_item.notifyType === 'newQcCall' || _item.notifyType === 'recheckCall' || _item.notifyType === 'newFailedQcCall') {
          _obj.title = _item.grade === 'qcExcellent' ? this.getHideNumber(_obj.title) + this.$t('notify.autoqcCallExcellent') : _item.grade === 'qcPass' ? this.getHideNumber(_obj.title) + this.$t('notify.autoqcCallPass') : _item.grade === 'qcFail' ? this.getHideNumber(_obj.title) + this.$t('notify.autoqcCallFail') : this.getHideNumber(_obj.title)
        } else if (_item.notifyType === 'rejectAppealCall') {
          _obj.title = this.getHideNumber(_obj.title) + this.$t('notify.autoqcCallReject')
        } else if (_item.notifyType === 'newQcChat' || _item.notifyType === 'recheckChat' || _item.notifyType === 'newFailedQcChat') {
          _obj.title = _item.grade === 'qcExcellent' ? _obj.title + this.$t('notify.autoqcChatExcellent') : _item.grade === 'qcPass' ? _obj.title + this.$t('notify.autoqcChatPass') : _item.grade === 'qcFail' ? _obj.title + this.$t('notify.autoqcChatFail') : _obj.title
          if (_item.data && _item.data.customerName) {
            _obj.title = this.$t('notify.autoqcCustomer') + _obj.title
          } else {
            _obj.title = this.$t('notify.autoqcVisitor') + _obj.title
          }
        } else if (_item.notifyType === 'rejectAppealChat') {
          _obj.title = _obj.title + this.$t('notify.autoqcChatReject')
          if (_item.data && _item.data.customerName) {
            _obj.title = this.$t('notify.autoqcCustomer') + _obj.title
          } else {
            _obj.title = this.$t('notify.autoqcVisitor') + _obj.title
          }
        }
        if (_item.notifyType && _item.data && _item.notifyType.indexOf('Chat') > -1) {
          for (let i = 0; i < this.source.length; i++) {
            if (this.source[i].key === _item.data.custsource1) {
              _obj.sourceName = this.source[i].name || '--'
              break
            }
          }
        }
        if (_item.data && _item.notifyType && _item.notifyType.indexOf('newFailedQc') > -1) { // 质检配置里面设置的提醒人员
          if (this.$store.getters.agents) {
            let agentObj1 = this.$store.getters.agents[_item.data.agentId] || ''
            let agentObj2 = this.$store.getters.agents[_item.data.gradeUser] || ''
            let name1 = ''
            let name2 = ''
            name1 = agentObj1 ? agentObj1.displayName : ''
            name2 = agentObj2 ? agentObj2.displayName : ''
            if (_item.notifyType === 'newFailedQcCall') {
              _obj.autoqcScore = this.$t('notify.autoqcCallScore', {name2: name2, name1: name1, gradeAmount: _item.data.gradeAmount})
//                _obj.autoqcScore = name2 + ' 质检了 ' + name1 + '的通话记录，质检评分为：<span style="color:#ff6b6b">' + _item.data.gradeAmount + '</span>分'
            } else if (_item.notifyType === 'newFailedQcChat') {
              _obj.autoqcScore = this.$t('notify.autoqcChatScore', {name2: name2, name1: name1, gradeAmount: _item.data.gradeAmount})
            }
          }
        }
        this.detailObj = _obj
      },
      handleShowCustAssaginDetail (_item, _obj) {
      },
      handleShowBusDetail (_item, _obj) {
        _obj.number = _item.data.number
        _obj.action = _item.data.action
        let _createUser = this.agents[_item.data.createUser].displayName
        _obj.createUser = _createUser
        let info = getBusinessHisotryInfo(_item.data, _item.data.step, _item.data.fromStep, _item.data.excuteAction)
        _obj.info = info
        _obj.subTitle = this.$t('notify.creatBusTime', {createUser: _createUser, createTime1: _item.createTime})
        let _busType = this.busType.filter((item1) => {
          return item1._id === _item.data.flow
        })
        _obj.step = info.stepName
        _obj.busType = _busType[0].name
        if (_obj.action === 'transformIn') {
          _obj.step1 = this.$t('notify.step1', {master: this.agents[_item.data.master].displayName, actionName: info.actionName})
          _obj.step2 = this.$t('notify.step2', {fromStepName: _obj.info.fromStepName, stepName: _obj.info.stepName})
        } else if (_obj.action === 'comment') {
          _obj.step1 = this.$t('notify.stepComment', {master: this.agents[_item.data.master].displayName, content: _item.data.excuteData.backInfo})
        } else if (_obj.action === 'assign') {
          if (_obj.content === 'undealbusTimeout' || _obj.content === 'mybusTimeout'|| _obj.content === 'timeoutCurrent') {
            _obj.step1 = this.$t('notify.busTimeout')
          }  else if (_obj.content === 'masterLeader') {
             _obj.step1 = this.$t('notify.leaderBusTimeout')
          }else {
            if (_item.data.excuteData.master) {
              _obj.step1 = this.$t('notify.stepAssign', {master: this.agents[_item.data.master].displayName, excuteUser: this.agents[_item.data.excuteData.master].displayName})
            } else {
              _obj.step1 = this.$t('notify.stepAssign', {master: this.agents[_item.data.master].displayName, excuteUser: this.$t('public.autoAssign')})
            }
          }
        } else if (_obj.action === 'share') {
          if (_obj.content === 'removeBusDynamic') {
            _obj.step1 = this.$t('notify.shareRemoveBusDynamic', {senderId: _item.senderId && _item.senderId !== 'system' ? this.agents[_item.senderId].displayName : ''})
          } else {
            _obj.step1 = this.$t('notify.shareBusDynamic', {senderId: _item.senderId !== 'system' ? this.agents[_item.senderId].displayName : ''})
          }
        } else if (_obj.action === 'backIn') {
          _obj.step1 = this.$t('notify.step1', {master: this.agents[_item.data.excuteUser].displayName, actionName: info.actionName})
          _obj.step2 = this.$t('notify.step2', {fromStepName: _obj.info.fromStepName, stepName: _obj.info.stepName})
        } else if (_obj.action === 'recreate') {
          _obj.step1 = this.$t('notify.step1', {master: this.agents[_item.data.master].displayName, actionName: info.actionName})
        } 
        this.detailObj = _obj
      },
      handleShowTriggerDetail (_item, _obj) {
        let {flow, step, createUser, type, triggerName, businessNum,triggerTime,triggerType} = _item.data || {}
        let _busType = this.busType.filter((item1) => {
          return item1._id === flow
        })
        _obj.busType = _busType[0].name
        let stepObj = _busType[0] && _busType[0].steps.filter((item1) => {
          return item1._id === step
        })
        _obj.stepName = stepObj[0].name
        let _createUser = this.agents[createUser].displayName
        _obj.subTitle = this.$t('notify.creatBusTime', {createUser: _createUser, createTime1: _item.createTime})
        if (type === 'business') {
          if(triggerType){
            if(triggerType=='min'){
              triggerType = this.$t('public.minutes2')
            }else if(triggerType=='hours'){
              triggerType = this.$t('public.hours2')
            }else{
              triggerType = this.$t('public.day2')
            }
          }
          if (_obj.content === 'timeoutBefore') {
            _obj.triggerContent = this.$t('notify.timeoutBefore',{triggerTime,triggerType})
          } else if (_obj.content === 'timeoutAfter') {
            _obj.triggerContent = this.$t('notify.timeoutAfter',{triggerTime,triggerType})
          }else if (_obj.content === 'timeoutCurrent') {
            _obj.triggerContent = this.$t('notify.busTimeout')
          }else{
            _obj.triggerContent = this.$t('business.triggerNotify', {triggerName, businessNum})
          }
          // 触发器通知
        } else if (type === 'mail') {
          // 触发器，邮件失败通知
          _obj.data.agentName = _obj.data.agentName || []
          _obj.data.customerName = _obj.data.customerName || []
          _obj.triggerContent = this.$t('business.triggerNotifyMailError', {triggerName})
        } else {
          // 触发器，满意度发送短信失败通知

          _obj.triggerContent = this.$t('business.triggerNotifyError', {triggerName})
        }
        this.detailObj = _obj
      },
      handleShowDetail (_item, index, _flag1) {
        this.isShowFoldList = false
        this.detailFlag = true
        if (!_flag1) {
          if (_item.isRead === false) {
            this.noticeList[index].isRead = true
            this.noticeList[index].unReadNum = 0
            if (this.$store.state.cti.globalLet.undealNum > 0) {
              this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: this.$store.state.cti.globalLet.undealNum - 1})
            } else {
              this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: 0})
            }
          }
        }
        let _obj = {
          data: _item.data,
          type: _item.type,
          action: '',
          title: _item.title,
          content: _item.content,
          time: _item.createTime1,
          createUser: '',
          createTime: _item.createTime,
          info: {},
          notifyType: _item.notifyType || '',
          sourceName: '--',
          autoqcScore: '--'
        }
        if (_item.type === 'business') {
          this.handleShowBusDetail(_item, _obj)
        } else if (_item.type === 'customer' && _item.content === 'customerAssign') {
          _obj.number = _item.number
          _obj.configMessage = _item.configMessage
          _obj.configType = _item.configType
          _obj.num = _item.customerNum
          _obj.customerName = _item.data && _item.data.customerName
          _obj.subTitle = this.agents[_item.operator].displayName + this.$t('workbench.fenpei') + _item.createTime
          this.detailObj = _obj
        } else if (_item.type === 'customer' && _item.notifyType === 'customerPlan') {
          _obj.createTime = _item.data.notifyTime
          _obj.subTitle = this.$t('customer.createYu') + _item.createTime
          _obj.content1 = _item.data && _item.data.content
          _obj.executorName = _item.data && _item.data.executor && this.agents[_item.data.executor] ? this.agents[_item.data.executor].displayName : '--'
          if (_item.data) {
            if (_item.data.status === '0') {
              _obj.content2 = this.$t('customer.createPlan', {_action: this.agents[_item.createId] ? this.agents[_item.createId].displayName : '--'})
            } else {
              let _action = this.agents[_item.data.action] ? this.agents[_item.data.action].displayName : '--'
              if (_item.data.status === '1') {
                _obj.content2 = this.$t('customer.finishPlan', {_action: _action})
              } else if (_item.data.status === '2') {
                _obj.content2 = this.$t('customer.editPlan', {_action: _action})
              } else if (_item.data.status === '3') {
                _obj.content2 = this.$t('customer.chaoshiPlan')
              } else if (_item.data.status === '99') {
                _obj.content2 = this.$t('customer.channelPlan', {_action: _action})
              } else if (_item.data.status === '99') {
                _obj.content2 = this.$t('customer.rePlan', {_action: _action})
              }
            }
          }
          this.detailObj = _obj
        } else if (_item.type === 'announcement') {
          _obj.content = msgConvertion(_obj.content)
          this.detailObj = _obj
        } else if (_item.type === 'monitor' && _item.notifyType === 'remoteAssistMonitor') {
          _obj.content = _item.data.reason
          this.detailObj = _obj
        } else if (_item.type === 'configBusiness') {
          _obj.number = _item.data.number
          _obj.configMessage = _item.data.configMessage
          _obj.configType = _item.data.configType
          _obj.subTitle = this.$t('notify.submitBusTime', {createTime1: _item.createTime})
          this.detailObj = _obj
        } else if (_item.type === 'autoqc') { // 智能质检
          this.handleShowAutoqcDetail(_item, _obj)
        } else if (_item.type === 'export') {
          _obj.title = _item.title1
          let sessionId = window.sessionStorage.getItem('sessionId')
          let loginToken = window.sessionStorage.getItem('loginToken')
          if (_obj.data && _obj.data.path) {
            _obj.data.path = _obj.data.path + '&sessionId=' + sessionId + '&loginToken=' + loginToken
          }
          this.detailObj = _obj
        } else if (_item.type === 'trigger') {
          this.handleShowTriggerDetail(_item, _obj)
        } else if (_item.type === 'notice') {
          _obj.subTitle = this.agents[_item.operator].displayName + this.$t('workbench.fabu') + _item.createTime
          this.detailObj = _obj
        } else if (_item.type === 'monitorWarning') {
          _obj.title = _item.title1
          _obj.subTitle = _item.content1
          let content2 = '监控详情：'
          let details = _item.details
          if (_item.notifyType === 'agentCallStatus') {
            if (details.eventType === "RingNotDeal") {
             let textArr = []
              if (details.timeLength > 0) {
                textArr.push('振铃时长大于' + details.timeLength + '秒')
              }
              if (details.times > 0) {
                textArr.push('振铃未接听大于' + details.times + '次')
              }
              content2 += textArr.join(',')
            } else if (details.eventType === 'Calling') {
              if (details.timeLength > 0) {
                content2 += '通话时长大于' + details.timeLength + '分钟'
              }
            }
            _obj.content2 = content2
            this.detailObj = _obj
          } else if (_item.notifyType === 'agentBusyStatus') {
            this.$store.dispatch('getCache', {type: 'phoneBars'}).then((res)=>{
              let state = details.status
              let timeLength = details.timeLength
              let content = ''
              res.some((item)=>{
                if (item.PhoneBarItemId === state) {
                   _obj.subTitle = _item.agentName + '(' +_item.agentExten + ')' + item.PhoneBarItemName + '状态已超时'
                  content2 += item.PhoneBarItemName + '时长大于' + timeLength + '分钟'
                  return true;
                }
              })
              _obj.content2 = content2
              this.detailObj = _obj
            })
          }
        } else if (_item.type === 'call') {
           _obj.title = _item.title1
          _obj.subTitle = _item.content1
          let text = ''
          if (_item.data.callType === 'agent') {
            text = '座席：'
          } else {
            text = '客户：'
          }
          _obj.content2 = text + _item.data.content.join(',')
          this.detailObj = _obj
        } else {
          this.detailObj = _obj
        }
      },
//      处理滚动条滚到底部加载数据
      getNoticeHistoryScroll (event) {
        this.showMenu1 = false
        this.showMenu2 = false
        let nScrollHight = 0
        let nScrollTop = 0
        let nDivHight = event.target.offsetHeight // 视口的高度
        nScrollHight = event.target.scrollHeight // 滚动高度
        nScrollTop = event.target.scrollTop // 滚动最上面的距离
        if (nScrollTop + nDivHight + 2 >= nScrollHight) { // 解决不同分辨率下scrollTop的差异
          console.log(this.moreFlag)
          if (!this.moreFlag) {
            this.currentPage += 1
            let _data = {
              page: this.currentPage,
              pageSize: this.pageSize
            }
            if (this.checkType === 'noRead') {
              _data.isRead = false  // 未读
            }
            if (this.checkType !== 'all' && this.checkType !== 'noRead') {
              _data.type = this.checkType
            }
            this.loading = true
            this.$store.dispatch('getNoticeList', _data).then((res) => {
              if (res && res.success) {
                this.loading = false
                let _list = res.data
                if (_list.length === 0) {
                  this.moreFlag = true // 当第一次返回的列表为空时 滚动条滚动将不会再发请求
                }
                if (_list.length !== 0) {
                  for (let i in _list) {
                    let _item = this.handleNotList(deepClone(_list[i]))
                    this.noticeList.push(_item)
                  }
                }
              }
            })
          }
        }
      },
      reset () {
        this.showMenu1 = false
        this.showMenu2 = false
        this.isActive = -1
        this.checkType = 'all'
        this.filterTypeName = this.$t('workbench.all')
        this.detailFlag = false
        this.isShowFoldList = false
      },
      //  展开通知列表
      showNotify (flag) {
        if (flag) {
          this.notify = !this.notify
          this.isShowFoldList = false
          this.detailFlag = false
          this.currentPage = 1
          if (this.notify) {
            this.reset()
            this.noticeList = []
            let _data = {
              page: this.currentPage,
              pageSize: this.pageSize
            }
            this.noneFlag = false
            this.fetchNotify(_data)
          }
        }
      },
      //      确定清空已读消息
      confirm () {
        if (this.modalType === 'clearMsg') {
          this.showModal = false
          this.loading = true
          this.currentPage = 1
          this.noneFlag = false
          let _data = {
          }
          if (this.checkType !== 'all' && this.checkType !== 'noRead') {
            _data.type = this.checkType
          }
          this.$store.dispatch('clearNotice', _data).then((res1) => {
            if (res1 && res1.success) {
              let data = {
                page: this.currentPage,
                pageSize: this.pageSize
              }
              if (this.checkType !== 'all' && this.checkType !== 'noRead') {
                data.type = this.checkType
              }
              if (this.checkType === 'noRead') {
                data.isRead = false  // 未读
              }
              this.$store.dispatch('getNoticeList', data).then((res2) => {
                if (res2 && res2.success) {
                  this.loading = false
                  this.detailFlag = false
                  this.isShowFoldList = false
                  this.moreFlag = false
                  this.noticeList = []
                  // this.checkType = 'all'
                  // this.filterTypeName = this.$t('workbench.all')
                  let _list = res2.data
                  if (_list.length === 0) {
                    this.noneFlag = true  // 暂无数据展示
                  } else {
                    for (let i in _list) {
                      let _item = this.handleNotList(deepClone(_list[i]))
                      this.noticeList.push(_item)
                    }
                  }
                }
              })
            }
          })
          document.getElementById('content-auto').scrollTop = 0
        } else if (this.modalType === 'operationTip') {
          this.routerJump(this.jumpObj)
        }
      },
      //  点开通知按钮 请求列表 _flag 清空noticeList
      fetchNotify (_data) {
        this.loading = true
        this.$store.dispatch('getNoticeList', _data).then((res) => {
          if (res && res.success) {
            this.loading = false
            this.detailFlag = false
            this.isShowFoldList = false
            this.moreFlag = false
            this.noneFlag = false
            let _list = res.data
            // 客户模块创建假数据 start
            // end
            this.noticeList = []
            if (_list.length === 0) {
              this.noneFlag = true  // 暂无数据展示
            } else {
              for (let i in _list) {
                let _item = this.handleNotList(deepClone(_list[i]))
                this.noticeList.push(_item)
              }
            }
          }
        })
        // 触发器只有小铃铛通知，没有推送，点击小铃铛请求未读数
        this.$store.dispatch('refreshNoticeUndealNum', {})
      },
//      展开左侧列表
      showOption () {
        this.showMenu1 = false
        this.showMenu2 = !this.showMenu2
      },
//      选择左侧列表的项
      changeMenu (_flag) {
        this.isActive = -1
        this.noneFlag = false
        this.showMenu1 = false
        this.checkType = _flag // 显示对勾
        this.filterTypeName = this.$t('workbench.' + _flag)
        this.currentPage = 1
        let _data = {
          page: this.currentPage,
          pageSize: this.pageSize
        }
        if (_flag !== 'all' && _flag !== 'noRead') {
          _data.type = _flag
        }
        if (_flag === 'noRead') {
          _data.isRead = false  // 未读
        }
        this.fetchNotify(_data)
        document.getElementById('content-auto').scrollTop = 0
      },
//      展开右侧列表
      showTypeMenu () {
        this.showMenu2 = false
        this.showMenu1 = !this.showMenu1
      },
//      选择右侧列表的项
      changeOpt (_flag) {
        this.showMenu2 = false
        if (_flag === 'clearMsg') {
          this.showModal = true
          this.modalType = 'clearMsg' // 判定模态框中显示的内容
        } else if (_flag === 'readMsg') {
          this.noneFlag = false
          this.handleReadMsg(_flag)
          document.getElementById('content-auto').scrollTop = 0
        }
      },
//     标记已读数据刷新
      handleReadMsg (type) {
        let _data = {
        }
        if (this.checkType !== 'all' && this.checkType !== 'noRead') {
          _data.type = this.checkType
        }
        this.$store.dispatch('batchReadNotify', _data).then((res) => {
          if (res && res.success) {
            this.currentPage = 1
            this.isActive = -1
            let _data = {
              page: this.currentPage,
              pageSize: this.pageSize
            }
            if (this.checkType !== 'all' && this.checkType !== 'noRead') {
              _data.type = this.checkType
            }
            if (this.checkType === 'noRead') {
              _data.isRead = false  // 未读
            }
            this.fetchNotify(_data)
            this.$store.dispatch('refreshNoticeUndealNum', {})
          }
        })
      },
      listenerFun () {
        this.notify = false
        this.showMenu1 = false
        this.showMenu2 = false
      },
      // 工单或客户回复的服务工单跳到工单模块
      busJump (_obj) {
        if (this.$route.path.split('/')[2] === 'business') {
          this.showModal = true
          this.modalType = 'operationTip'
        } else {
          this.routerJump(_obj)
        }
      },
      // 邮件的路由跳转
      emailJump (_obj) {
        if (isHasMenu('nav_email', this.$store.state.session.user)) {
          this.detailFlag = false
          this.isShowFoldList = false
          this.notify = false
          this.$router.push({path: '/index/email/', query: {active: 'email_all', emailNumber: _obj.data.emailSessionId, status: 'timeOut'}})
          bus.$emit('emailJumpRoute')  // 邮件跳转路由监听
        } else {
          this.$message.error(this.$t('email.forbiddenEmail'))
        }
      },
      customerAssignJump (_obj) {
        if (this.$route.path.split('/')[2] === 'customer') {
          this.showModal = true
          this.modalType = 'operationTip'
        } else {
          this.routerJump(_obj)
        }
      },
      // 设置工单路由跳转
      configBusJump (_obj) {
        let route = this.$route.path.split('/')[2]
        if ((route === 'ServiceBusinessList' && _obj.content === 'reply')) {
          // 服务工单且是回复给客户的跳到服务工单
          this.showModal = true
          this.modalType = 'operationTip'
        } else {
          this.routerJump(_obj)
        }
      },
      // 智能质检路由跳转
      autoqcJump (_obj) {
        if (_obj.notifyType && _obj.notifyType.indexOf('Call') > -1) {
          if (isHasMenu('nav_call', this.$store.state.session.user)) {
            this.detailFlag = false
            this.isShowFoldList = false
            this.notify = false
            this.$router.push({path: '/index/call/cdr_all', query: {active: 'cdr_all', callId: _obj.data._id, status: 'autoqc'}})
          } else {
            this.$message.error(this.$t('email.forbiddenCall'))
          }
        } else if (_obj.notifyType && _obj.notifyType.indexOf('Chat') > -1) {
          if (isHasMenu('nav_webchat', this.$store.state.session.user)) {
            this.detailFlag = false
            this.isShowFoldList = false
            this.notify = false
            this.$router.push({path: '/index/webchat/webchat_all', query: {active: 'webchat_all', webchatId: _obj.data._id, status: 'autoqcWebchat'}})
          } else {
            this.$message.error(this.$t('email.forbiddenWebchat'))
          }
        }
      },
//      页面详情路由跳转
      handleJump (_obj) {
        this.jumpObj = _obj
        if (_obj.type === 'business' || _obj.content === 'receive') {
          this.busJump(_obj)
        } else if (_obj.type === 'customer') {
          this.customerAssignJump(_obj)
        } else if (_obj.type === 'email') {
          this.emailJump(_obj)
        } else if (_obj.type === 'configBusiness') {
          this.configBusJump(_obj)
        } else if (_obj.type === 'autoqc') {
          this.autoqcJump(_obj)
        } else if (_obj.type === 'export') {
          this.exportJump(_obj)
        } else if (_obj.type === 'trigger') {
          // 目前只有工单触发器
          this.busJump(_obj)
        } else if (_obj.type === 'notice') {
          this.routerJump(_obj)
        }
      },
      exportJump (_obj) {
        let route = ''
        let isPower = false
        if (_obj.content === 'business') {
          isPower = isHasMenu('nav_business', this.$store.state.session.user)
          route = '/index/business/exportTask?active=exportTask'
        } else if (_obj.content === 'call') {
          isPower = isHasMenu('nav_call', this.$store.state.session.user)
          route = '/index/call/cdr_all/callExport'
        } else if (_obj.content === 'webchat') {
          isPower = isHasMenu('nav_webchat', this.$store.state.session.user)
          route = '/index/webchat/webchat_all/export'
        } else if (_obj.content === 'km') {
          isPower = isHasMenu('nav_km', this.$store.state.session.user)
          route = '/index/km/export'
        }
        if (!isPower) {
          this.$message.error(this.$t('message.user_not_authorized'))
          return
        }
        if (route) {
          this.detailFlag = false
          this.isShowFoldList = false
          this.notify = false
          this.$router.push(route)
        }
      },
//      删除列表
      deleteList (_item) {
        this.noneFlag = false
        this.showMenu1 = false
        this.showMenu2 = false
        this.$store.dispatch('delNotice', {_id: _item._id}).then((res) => {
          if (res && res.success) {
            this.currentPage = 1
            this.detailFlag = false
            this.isShowFoldList = false
            this.isActive = -1
            if (_item.listCount) {
              if (_item.unReadNum > 0) {
                if (this.$store.state.cti.globalLet.undealNum > 0) {
                  this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: this.$store.state.cti.globalLet.undealNum - _item.unReadNum})
                } else {
                  this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: 0})
                }
              }
            } else {
              if (_item.isRead === false) {
                if (this.$store.state.cti.globalLet.undealNum > 0) {
                  this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: this.$store.state.cti.globalLet.undealNum - 1})
                } else {
                  this.$store.commit(types.SET_NOTICE_UNDEALNUM, {undealNum: 0})
                }
              }
            }
            if (this.noticeList.length !== 0) {
              this.noticeList.forEach((item, index) => {
                if (_item._id === item._id) {
                  this.noticeList.splice(index, 1)
                }
              })
            }
            if (this.noticeList.length === 0) {
              this.noneFlag = true
            }
          }
        })
      }
    },
    props: {
      source: Array,
      busType: Array,
      agents: Object
    },
    components: {
    },
    computed: {
      undealNum () {
        return this.$store.state.cti.globalLet.undealNum || 0
      }
    },
    mounted () {
      this.$store.dispatch('getCache', {type: 'phoneBars'}).then((res)=>{
        this.phoneBarsList = res
      })
    }
  }
</script>
<style scoped lang="stylus">
@import "../../../assets/common.styl"
.step1-style
  width: 300px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
.noread-circle
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: 10px;
  top: 11px;
.bus-fold-content
  clear: both;
  color: #000;
.title-line
  border-bottom  1px solid #ccc
  padding-bottom 8px
.line-hight-18
  line-height 18px
.icon
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
.user-info1
  float right
  height 100%
  border-right 1px solid $c-border1
  .help
    padding-right 15px
    .rel-operation
      padding-top 17px
.user-info1 > div
  float right
  height 100%
  border-right 1px solid $c-border1
.user-info
  height 100%
  .customize-modal
    background: rgba(0, 0, 0, 0.3);
    width: 100vw;
    height: 100vh;
    z-index: 10005;
    left: -65px;
    position: absolute;
    .el-dialog
      top: 10%
      width 500px
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border-radius: 2px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      margin-bottom 50px
      .el-dialog__header
        padding: 20px 20px 0;
        color: #999;
        .close
          float right
          cursor pointer
          color #bfcbd9
        .close:hover
          color $c-main
  .detail
    background: #fff;
    z-index: 10001;
    position: absolute;
    top: 97px;
    width: 400px;
    right: 338px;
    max-height: calc(100vh - 145px);
    border: 1px solid #d9d9d9;
    border-right: none;
    box-shadow: rgba(0,0,0,0.3) 1px 1px 6px;
    .title
      min-height 15px
      .sub-title
        font-size 14px
        font-weight 700
        color $cf-gray1
        width 300px
        float left
        line-height 14px
        word-break break-all
      .time
        color $cf-gray4
        font-size 12px
        line-height 12px
        float right
    .creat-time
      color $cf-gray4
      margin-top 5px
    .content
      clear both
      color $cf-gray1
      margin-top 15px
      .bus-action
        border-bottom: 1px dashed #ccc
        margin-bottom: 15px
        padding-bottom: 15px
        font-size 14px
        line-height 14px
      .sub-content1
        font-size 12px
        line-height 18px
      .trigger-content
        padding-bottom: 10px
    .opter-btn
      text-align right
      color $c-main
      margin-bottom 12px
      padding-top 11px
      box-shadow: 0px -4px 6px -4px rgba(0,0,0,0.2);
      span
        cursor pointer
        border 1px solid #fff
        padding 5px 10px
        border-radius 4px
      span:nth-child(1)
        margin-right 16px
      span:nth-child(2)
        margin-right 10px
      span:hover
        border 1px solid $c-main
        background #f4fffe
  .ellipsis
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  .height-20
    height 20px
  .float-l
    float left
  .clear-fl
    clear both
  .padd-l-10
    padding-left 10px
  .padd-l-5
    padding-left 5px
  .version-tip
    position absolute
    border none
    background-color: rgba(87,186,183,1)
    right 0px
    width 100%
    z-index 10000
    color #fff
    height 52px
    .close
      position: absolute;
      top: 17px;
      left: 12px;
      font-size: 16px;
      cursor pointer
    div
      font-weight: 100
      padding-left: 15px
  .ways
    min-width 140px
    text-align right
    white-space nowrap
  .user-pic
    min-width 113px
  .logout
    width 120px
    background-size 18px auto
    border-right 0
    color #808080
    font-weight bold
    text-align center
    line-height 52px
    cursor pointer
    display flex
    .iconfont
      font-size 20px
      font-weight normal
  .back-old-V a
    color $cf-white
    display block
    width 90px
    height 30px
    text-align center
    line-height 30px
    background-color $c-main
    margin 10px 20px
    border-radius 3px
  .back-old-V a:hover
    background-color $c-main
  .icon-tuichu
    flex 1
  .title-tip
    width calc(100% - 70px)
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-top 20px
    margin-left 20px
  .refresh
    color #fff
    width: 25px;
    position: absolute;
    right: 10px;
    top: 20px;
    cursor pointer
  .notify
    background: #fff;
    z-index: 10000;
    position: absolute;
    top: 53px;
    width: 328px;
    right: 10px;
    border: none;
    box-shadow: rgba(0,0,0,0.3)0px 3px 9px;
    border-radius 4px
    .content
      max-height calc(100vh - 145px);
      overflow-y auto
      position relative
      .no-notice
        font-size 14px
        text-align center
        margin 8px 0px
        color $cf-gray4
      .time1
        visibility visible
        padding-right 10px
      .opt-btn
        visibility hidden
        position: absolute;
        right: 0px;
      .icon-guanbi
        margin-left 10px
        font-size 12px
        margin-right 10px
        cursor pointer
      ul
        li
          padding: 10px 0px;
          border-bottom: 1px solid #ccc;
          padding-left: 8px;
          max-height 50px
          margin 0px 2px
          cursor pointer
          position relative
          .icon
            color $cf-gray3
            height 40px
            width: 24px;
            padding-top: 4px;
          .dynamic
            margin-left 28px
            .title
              width: 174px;
              float: left;
              font-size: 14px;
              color: $cf-gray4;
              line-height: 14px;
            .time
              font-size 12px
              color: $cf-gray4;
              float: right;
              width: 100px;
              text-align: right
              position relative
          .noread-cont
            font-size 12px
            color $cf-gray1
          .read-cont
            font-size 12px
            color $cf-gray1
          .read-cont1
            color $cf-gray4
        li:hover
          background #ddecfc
          .time1
            visibility hidden
          .opt-btn
            visibility visible
        .active
          background $list-active

  .tooltip-i1
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: 13px solid transparent
    border-bottom-color: rgba(0,0,0,0.9);
    top: 40px;
    right: 48px;
    border-top-width: 0;
    font-size: 12px;
  .tooltip-i1:after
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: 13px solid transparent
    border-bottom-color: #f5f5f5;
    top: 0px;
    right: -13px;
    border-top-width: 0;
    content: " ";
    z-index 10000
  .notice-cont
    clear: both;
    width: 100vw;
    height: 100vh;
    position: relative;
    margin-top: -54px;
    border-width: 6px;
  .notify-title
    height 45px
    background: #f5f5f5
    color $cf-gray3
    position relative
    .type-menu
      z-index: 100;
      transform-origin: center top 0px;
      position: absolute;
      top: 45px;
      left: 0px;
      width: 150px;
      background: #fff;
      box-shadow: rgba(0,0,0,0.3) 0px 0px 10px;
      ul
        margin 3px 0px
        li
          padding 5px 0px
          padding-left 15px
          position relative
        li:hover
          background #ddecfc
          cursor pointer
    .icon-zhankai1
      font-size 10px
      padding-left 5px
      cursor pointer
    .operating
      transform-origin: center top 0px;
      position: absolute;
      top: 45px;
      right: 0px;
      width: 110px;
      background: #fff;
      box-shadow: rgba(0,0,0,0.3) 0px 0px 10px;
      z-index 100
      ul
        margin 3px 0px
        li
          padding 5px 0px
        li:hover
          background #ddecfc
          cursor pointer
    .icon-gengduo
      cursor pointer
      position: absolute;
      right: 15px;
    .icon-xuanze
      font-size 12px
  .from-step
    font-size 14px
    line-height 14px
    color #3b5998
    padding 0px 5px
  .to-step
    font-size 14px
    line-height 14px
    color #aa00e8
    padding 0px 5px
  .notify1A
    font-size 12px
    line-height 14px
    color $cf-gray1
  .new-skill
    width 70px
    height 44px
    background url(../../../assets/img/newSkill.png)
    background-size 100%
    background-repeat:no-repeat
    position absolute
    top 0
    right 400px
  .ai-extension
    width 100px
    height 40px
    background url(../../../assets/img/ai-extension.png) no-repeat
    background-size 100%
    position absolute
    top 0
    right 430px
  .icon-xiaoxitongzhi,.icon-tuichu
    color #808080
  .icon-xiaoxitongzhi,.icon-tuichu
    color #808080
.tip
  .icon-tixingweizhi
    border: 1px solid $cf-level3
    border-radius: 50%
    display: inline-block
    height: 16px
    width: 16px
    text-align: center
    line-height: 16px
    font-size: 10px
    color $cf-level3
    cursor pointer
.summary
  padding-top 1px
  display -webkit-box
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space normal
.webchat-warning
  font-size: 16px
  align-items: center
  display: flex
  margin-bottom: 10px;
  .el-icon-warning
    color: #E6A23C
    font-size: 26px
    margin-right: 10px
.qc-border
  border-bottom 1px dashed #ccc
  padding-bottom 10px
  word-wrap break-word
.qc-pad10
  padding-top 10px
.unReadNum
  position: absolute;
  right: 20px;
  bottom: 5px;
  background-color: #ff6a6e;
  border-radius: 50%;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  padding: 1px 6px;
  text-align: center;
  white-space: nowrap;
  color: #fff;
.type-menu
  .icon-xuanze
    position: absolute;
    right: 10px;
.bus-name
  color: #878787;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 220px;
.content-div
  position fixed
  left 56px
  top 52px
  width calc(100vw - 56px)
  height calc(100vh - 52px)
  background-color #fff
  z-index 1001
  overflow-y auto
  .bread-crumb
    margin-bottom 20px
    position relative
    .el-icon-close
      position absolute
      right 20px
      top 12px
      color #bfcbd9
      cursor pointer
      font-weight bold
      &:hover
        color $c-main
  .set-div
    padding 3px 10px
    .form-div
      width 500px
      margin-bottom 65px
.content-div.navMenuState
  left 120px
  width calc(100vw - 120px)
</style>